<template>
  <div class="article-check">
    <el-main>
      <h2>{{ article.title }}</h2>
      <div class="meta-info">
        <span>作者: {{ article.author }}</span>
        <span>创作时间: {{ article.creationTime }}</span>
      </div>
      <div class="content">
        <img :src="article.coverImg" :alt="article.title" class="article-image">
        <p><span v-html="article.content"></span></p>
      </div>
      <div class="actions">
        <el-button type="primary" @click="handleLike">点赞 ({{ likes }})</el-button>
        <el-button type="success" @click="handleCollect">收藏 ({{ collects }})</el-button>
        <el-button type="warning" @click="handleShare">转发</el-button>
      </div>
      <div class="comments">
        <h3>评论区</h3>
        <el-input
          v-model="newComment"
          placeholder="请输入评论"
          clearable
          style="margin-bottom: 10px;"
        >
          <template #append>
            <el-button @click="addComment">发表</el-button>
          </template>
        </el-input>
        <div v-for="(comment, index) in comments" :key="index" class="comment">
          <p><strong>{{ comment.author }}:</strong> <span v-html="comment.text"></span></p>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { articleDetailsService } from '@/api/article';

const route = useRoute();
const articleId = +route.params.id;

console.log('Article ID:', articleId); // 添加调试信息

const article = ref({
  title: '',
  author: '',
  creationTime: '',
  coverImg: '',
  content: ''
});

const likes = ref(0);
const collects = ref(0);
const newComment = ref('');
const comments = ref([]);

const fetchArticleDetails = async () => {
    const result = await articleDetailsService(articleId);
    article.value = result.data;
    likes.value = result.data.likes || 0;
    collects.value = result.data.collects || 0;
    comments.value = result.data.comments || [];
    console.log('Article Details:', result.data);
};

const handleLike = () => {
  likes.value++;
  // 这里可以添加更新点赞数的逻辑
};

const handleCollect = () => {
  collects.value++;
  // 这里可以添加更新收藏数的逻辑
};

const handleShare = () => {
  // 这里可以添加转发的逻辑
  alert('文章已转发');
};

const addComment = () => {
  if (newComment.value.trim()) {
    comments.value.push({
      author: '匿名用户', // 这里可以替换为实际的用户名
      text: newComment.value
    });
    newComment.value = '';
    // 这里可以添加保存评论的逻辑
  }
};

onMounted(() => {
  fetchArticleDetails();
});
</script>

<style scoped>
.article-check {
  min-height: 100vh;
  padding: 20px;
}

.meta-info {
  margin-bottom: 20px;
  color: #666;
}

.article-image {
  max-width: 50%;
  height: auto;
  margin-bottom: 20px;
}

.actions {
  margin-bottom: 20px;
}

.comment {
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>